<!--
 * @Author: sundl
 * @Date: 2021-04-08 16:13:29
 * @project: 天津YQ平台
-->
<template>
  <el-row class="wrap">
    <module-card>
      <template v-slot:header>案事件人员信息列表</template>
      <search-page ref="searchPage" :config="caseInfoConfig" :requestFcun="caseUserInfoSearch">
        <template v-slot:filter>
          <el-form label-width="110px">
            <dg-row :span="24" type="flex">
              <dg-col :span="8">
                <el-form-item label="有无稳控单位：">
                  <dg-select
                    v-model="filter.isWkdw"
                    :data="isWkdwList"
                    placeholder="选择有无稳控单位"
                    @change="(...defaultArgs) => filterChange(...defaultArgs, 'wkdw', 'ifnull')"
                    filterable
                    clearable
                  ></dg-select>
                </el-form-item>
              </dg-col>
              <dg-col :span="8">
                <el-form-item label="归属地区：">
                  <dg-tree-drop
                    v-model="filter.wkdw"
                    :code="BM_DEPT"
                    :props="{
                      value: 'value',
                      label: 'label',
                      children: 'children'
                    }"
                    :lazy-load="true"
                    :tree-props="{
                      checkOnClickNode: true
                    }"
                    clearable
                    filterable
                    placeholder="选择归属地区"
                    multiple
                    collapse-tags
                    style="width: 100%;"
                    visible-type="branch"
                  ></dg-tree-drop>
                </el-form-item>
              </dg-col>
              <dg-col :span="8">
                <el-form-item label="稳控类型：">
                  <dg-select
                    v-model="filter.wklx"
                    :data="wklxList"
                    placeholder="选择稳控类型"
                    @change="(...defaultArgs) => filterChange(...defaultArgs, 'wklx')"
                    filterable
                    clearable
                    multiple
                    collapse-tags
                  ></dg-select>
                </el-form-item>
              </dg-col>
            </dg-row>
            <dg-row :span="24" type="flex">
              <dg-col :span="8">
                <el-form-item label="关键词：">
                  <el-input
                    style="width: 100%"
                    v-model="filter.gjc"
                    @input="onSearch"
                    class="filter-input"
                    placeholder="请输入关键词"
                    collapse-tags
                  ></el-input>
                </el-form-item>
              </dg-col>
              <dg-col :span="5" style="margin-left: -80px;">
                <!-- <dg-col :span="5" style="margin-left: 32px;"> -->
                <el-form-item label="" style="display: flex;">
                  <!-- <dg-button type="primary" @click="onSearch">搜索</dg-button> -->
                  <dg-button type="primary" ghost @click="onExport">导出</dg-button>
                </el-form-item>
              </dg-col>
            </dg-row>
          </el-form>
        </template>

        <template v-slot:sfzh="{ row }">
          <dg-button v-if="row.sfzh" type="text" @click="onRouteArchive(row)">{{ row.sfzh }}</dg-button>
          <span v-else>-</span>
        </template>

        <template v-slot:factor-info="{ row }">
          <div class="factor">
            <p>联系电话：{{ row.ryysLxdh | filterText }}</p>
            <p>车辆号：{{ row.ryysClh | filterText }}</p>
            <p>网名：{{ row.ryysWm | filterText }}</p>
          </div>
        </template>

        <template v-slot:action="{ row }">
          <dg-button type="text" @click="showHistoryRecord(row)">历史修改记录</dg-button>
        </template>
      </search-page>
    </module-card>
  </el-row>
</template>

<script>
import { caseInfoConfig } from './config';
import { caseUserInfoSearch, getCodeDict, exportUserInfo } from '@/api/common';
import { BM_YWWKDW, BM_DEPT, BM_WKLX } from '@/common/codeDic';
import { handleFilestream, routeToArchive } from '@/utils/data-utils';

export default {
  name: 'people-info-list',
  components: {},
  data() {
    return {
      BM_DEPT,
      caseUserInfoSearch,
      caseInfoConfig,
      filter: {},
      filterParams: [],
      wklxList: [],
      isWkdwList: [],
      isLoad: false
    };
  },
  watch: {
    'filter.wkdw'(newVal) {
      // 进入页面为空时也会请求，所以屏蔽第一次请求
      if (!this.isLoad) {
        this.isLoad = true;
        return;
      }
      this.filterChange(newVal, {}, 'wkdw', 'in');
    }
  },
  computed: {
    flowId() {
      return this.$route.params.id || '';
    }
  },
  methods: {
    onRouteArchive(row) {
      routeToArchive(row.sfzh);
    },
    onSearch(value) {
      this.$refs.searchPage.setFilterCondition({
        value,
        key: 'gjc'
      });
    },
    filterChange(val, obj, key, op) {
      let value="";
      let isAll=false;
      // 判断稳控类型是否有选择全部
       if(key=='wklx' && Array.isArray(val)){
           for(var i=0;i<val.length;i++){
                 if(val[i] === "")  {
                    isAll =true;
                 }
          }
       }
      // 稳控类型没有选择全部||key!=wklx
       if(!isAll){
       value = Array.isArray(val) ? val.toString() : val;
       }

      const params = op
        ? {
            value,
            key,
            op
          }
        : {
            value,
            key
          };
      this.$refs.searchPage.setFilterCondition(params);
    },
    showHistoryRecord(row) {
      this.$dgLayer({
        title: '历史修改记录',
        props: {
          id: row.id
        },
        component: require('./history-record'),
        area: ['60%', '480px']
      });
    },
    onExport() {
      const params = {
        ids: '',
        page: 0,
        size: 10,
        sort: {},
        metadata: JSON.stringify(caseInfoConfig.exportColumns),
        searchCondition: JSON.stringify([
          { name: 'flow_Id', op: '=', value: this.flowId, type: '', format: '' },
          { name: 'export_type', op: '=', value: 'asjryxx', type: '', format: '' }
        ])
      };
      exportUserInfo(params).then(res => {
        const fileName = '案事件人员信息列表' + this.$moment(new Date().getTime()).format('YYYYMMDD') + '.xlsx';
        handleFilestream(res, fileName);
      });
    }
  },
  mounted() {
    getCodeDict(BM_YWWKDW).then(res => {
       this.isWkdwList = res.data;
       this.isWkdwList.unshift({label: "全部",value: ""});
    });
    getCodeDict(BM_WKLX).then(res => {
      this.wklxList = res.data;
       this.wklxList.unshift({label: "全部",value: ""});
    });
    this.$nextTick(() => {
      this.filterParams = [
        {
          name: 'flow_Id',
          op: '=',
          value: this.flowId,
          type: '',
          format: ''
        }
      ];
      this.$refs.searchPage && this.$refs.searchPage.fecthData(this.filterParams);
    });
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  &-title {
    font-weight: bolder;
  }
}
.form-item {
  .label {
    text-align: right;
    min-width: 7em;
  }
}
</style>
